<template>
  <div class="Showcase1">
    <div class="Showcase1-top">
      <img
        class="Showcase1-top-left"
        :src="publicUrls + 'free/style4/Showcase2Topleft.webp'"
        alt=""
      />
      <img
        class="Showcase1-top-center"
        :src="publicUrls + 'free/style4/Showcase2Topcon.webp'"
        alt=""
      />
      <img
        class="Showcase1-top-right"
        :src="publicUrls + 'free/style4/Showcase2TopRight.webp'"
        alt=""
      />
    </div>
    <div class="Showcase1-center">
      <img
        class="Showcase1-center-left"
        :src="publicUrls + 'free/style4/Showcase4TopLeft.webp'"
        alt=""
      />
      <img
        class="Showcase1-center-center"
        :src="publicUrls + 'free/style4/Showcase4Topcon.webp'"
        alt=""
      />
      <img
        class="Showcase1-center-right"
        :src="publicUrls + 'free/style4/Showcase4TopRight.webp'"
        alt=""
      />

      <!-- <div class="Showcase1-center-left"></div>
      <div class="Showcase1-center-center"></div>
      <div class="Showcase1-center-right"></div> -->
    </div>
    <div class="Showcase1-center2">
      <img
        class="Showcase1-center2-left"
        :src="publicUrls + 'free/style4/Showcase4conLeft.webp'"
        alt=""
      />
      <!-- <img
        class="Showcase1-center2-center"
        :src="publicUrls + 'free/style4/Showcase4Topcon.webp'"
        alt=""
      /> -->
      <div class="Showcase1-center2-center"></div>
      <img
        class="Showcase1-center2-right"
        :src="publicUrls + 'free/style4/Showcase4conRight.webp'"
        alt=""
      />
    </div>
    <div class="Showcase1-btm">
      <img
        class="Showcase1-btm-left"
        :src="publicUrls + 'free/style4/Showcase2Btmleft.webp'"
        alt=""
      />
      <img
        class="Showcase1-btm-center"
        :src="publicUrls + 'free/style4/Showcase2BtmCon.webp'"
        alt=""
      />
      <img
        class="Showcase1-btm-right"
        :src="publicUrls + 'free/style4/Showcase2BtmRight.webp'"
        alt=""
      />
    </div>
    <div class="pole-box">
      <img
        v-for="(item, index) in props.list"
        :key="index"
        :style="{ left: `${ShowcaseItemTransform(item.x ? item.x : getParentX(Number(index)), item.width, 0.866)}rem` }"
        :src="publicUrls + 'free/style4/pole.webp'"
        alt=""
      />
    </div>
    <div class="stone-box">
      <img
        v-for="(item, index) in props.list"
        :key="index"
        :style="{ left: `${ShowcaseItemTransform(item.x ? item.x : getParentX(Number(index)), item.width, 1.333)}rem` }"
        :src="publicUrls + 'free/style4/stone.webp'"
        alt=""
      />
    </div>
    <div class="inverted">
      <img :src="publicUrls + 'free/style4/Showcase1inverted1.webp'" alt="" class="left" />
      <div class="content"></div>
      <img :src="publicUrls + 'free/style4/Showcase1inverted2.webp'" alt="" class="right" />
    </div>
  </div>
</template>   

<script lang="ts">
export default defineComponent({
  name: 'free4Style1',
});
</script>
  
<script setup lang="ts">
import { publicUrls } from '@/utils/minxin';
import { ShowcaseItemTransform } from '@/utils/setmaterialStyle';
import { defineComponent } from 'vue';
const props = defineProps({
  list: {
    type: Object,
  },
});

const getParentX = (indexs: number) => {
  let x = 0;
  for (let index = 0; index < indexs; index++) {
    // const element = array[index];
    x = x + props.list[index].width;
  }
  return x + 0.3;
};
</script>  

<style scoped lang="less">
.Showcase1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 300px;
  height: 100%;
  position: relative;
  .inverted {
    position: absolute;
    bottom: -130px;
    left: 50%;
    transform: translate(-50%, 0);
    width: calc(100% - 45px);
    height: 190px;
    display: flex;
    z-index: -1;
    img {
      object-fit: contain;
    }
    .left {
      width: 60px;
      height: 100%;
    }
    .content {
      width: 100%;
      height: 100%;
      flex-shrink: 1;
    }
    .right {
      width: 60px;
      height: 100%;
    }
  }
  .pole-box {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    img {
      width: 117px;
      height: 100%;
      position: absolute;
    }
  }
  .stone-box {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;

    -webkit-box-reflect: below -20% linear-gradient(transparent, rgba(0, 0, 0, 0.4));
    img {
      width: 180px;
      height: 190px;
      position: absolute;
      bottom: 0;
    }
  }
}
.Showcase1-top {
  display: flex;
  height: 44px;
  width: calc(100% - 45px);
  margin-bottom: 28px;

  .Showcase1-top-left {
    width: 60px;
    height: 100%;
    flex-shrink: 0;
  }
  .Showcase1-top-center {
    min-width: 194px;
    flex: 1;
    height: 100%;
  }
  .Showcase1-top-right {
    width: 60px;
    height: 100%;
    flex-shrink: 0;
  }
}
.Showcase1-center {
  display: flex;
  width: calc(100% - 45px);
  flex: 1;
  .Showcase1-center-left {
    width: 60px;
    height: 100px;
    flex-shrink: 0;
  }
  .Showcase1-center-center {
    min-width: 220px;
    flex: 1;
    height: 100px;
  }
  .Showcase1-center-right {
    width: 60px;
    height: 100px;
    flex-shrink: 0;
  }
}
.Showcase1-center2 {
  display: flex;
  width: calc(100% - 45px);
  height: 100%;
  .Showcase1-center2-center {
    width: 100%;
    min-width: 220px;
    height: 100%;
  }
  .Showcase1-center2-left {
    width: 60px;
    height: 100%;
    flex-shrink: 0;
  }
  .Showcase1-center2-right {
    width: 60px;
    height: 100%;
    flex-shrink: 0;
  }
}
.Showcase1-btm {
  width: calc(100% - 45px);
  height: 100px;
  display: flex;
  .Showcase1-btm-left {
    width: 60px;
    height: 100%;
  }
  .Showcase1-btm-center {
    width: 100%;
  }
  .Showcase1-btm-right {
    width: 60px;
    height: 100%;
  }
}
</style>